import { Link } from "react-router-dom";

import "./HeaderChannel.css";
import { ReactComponent as DynamicImg } from "../../common/svg/dynamic.svg";
import { ReactComponent as PopularImg } from "../../common/svg/popular.svg";
import { ReactComponent as ChannelImg } from "../../common/svg/channel.svg";
import { ReactComponent as ReadImg } from "../../common/svg/read.svg";
import { ReactComponent as BilibiliImg } from "../../common/svg/bilibili.svg";
import { ReactComponent as MessageSvg} from "../../common/svg/message.svg";

function IconItem({ href, SvgComponent = <div></div>, desc, className }) {
  return (
    <Link to={href} className="item">
      <div className={`icon-bg ${className}`}>
        <SvgComponent />
      </div>
      <span className="icon-title">{desc}</span>
    </Link>
  );
}

function ChannelLink({ href, desc, className = "", SvgComponent = "" }) {
  return (
    <Link to={href} className={`channel-link${className}`}>
      {
        SvgComponent == "" ? "" : <SvgComponent />
      }
      {desc}
    </Link>
  )
}

function HeaderChannel() {
  return (
    <div className="header-channel">
      <div className="channel-icons">
        <IconItem href={"/t"} SvgComponent={DynamicImg} desc={"动态"} className="dynamic" />
        <IconItem href={"/t"} SvgComponent={PopularImg} desc={"热门"} className="popular" />
        <IconItem href={"/t"} SvgComponent={ChannelImg} desc={"频道"} className="channel" />
      </div>
      <div className="right-channel-container">
        <div className="channel-items__left">
          <ChannelLink href={"/douga"} desc={"动画"} />
          <ChannelLink href={"/game"} desc={"游戏"} />
          <ChannelLink href={"/user"} desc={"个人主页"} />
          <ChannelLink href={"/t"} desc={"动态"} />
        </div>
        <div className="channel-items__right">
          <ChannelLink href={"/"} desc={"首页"} className={"__right"} SvgComponent={BilibiliImg} />
          <ChannelLink href={"/t"} desc={"动态"} className={"__right"} SvgComponent={DynamicImg} />
          <ChannelLink href={"/"} desc={"专栏"} className={"__right"} SvgComponent={ReadImg} />
          <ChannelLink href={"/"} desc={"消息"} className={"__right"} SvgComponent={MessageSvg} />
        </div>
      </div>
    </div>
  )
}

export default HeaderChannel;